<template>
  <div class="dialog">
    <el-dialog :title="title" :visible.sync="visible" :close-on-click-modal="false" width="65%">
      <el-form :model="createForm" label-width="120px" label-suffix=":" :rules="rules" ref="createForm">
        <div class="page-panel-title" style="margin-top: 0">用户信息</div>
        <div class="page-panel">
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="用户名称" prop="username">
                <el-input v-model.trim="createForm.username" placeholder="请输入用户名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="用户账号" prop="loginName">
                <el-input v-model.trim="createForm.loginName" placeholder="请输入用户账号" :disabled="isEdit"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="用户角色" prop="roleIds">
                <el-select v-model="createForm.roleIds" placeholder="请选择用户角色" multiple style="width: 100%">
                  <el-option v-for="item in roleList" :key="item.id" :label="item.roleName" :value="item.id" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="电话号码" prop="phonenum">
                <el-input v-model.trim="createForm.phonenum" placeholder="请输入电话号码"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="基本薪资" prop="baseSalary">
                <el-input v-model.trim="createForm.baseSalary" type="number" placeholder="请输入基本薪资"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否在岗" prop="onDuty">
                <el-select v-model="createForm.onDuty" placeholder="请选择是否在岗" style="width: 100%">
                  <el-option label="是" value="1" />
                  <el-option label="否" value="0" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="性别" prop="sex">
                <el-select v-model="createForm.sex" placeholder="请选择性别" style="width: 100%">
                  <el-option label="男" value="0" />
                  <el-option label="女" value="1" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="员工类型" prop="empType">
                <el-select v-model="createForm.empType" placeholder="请选择员工类型" style="width: 100%">
                  <el-option label="普通员工" value="0" />
                  <el-option label="技工" value="1" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="紧急联系人" prop="emergencyContact">
                <el-input v-model.trim="createForm.emergencyContact" placeholder="请输入紧急联系人"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="紧急联系人电话" prop="emergencyPhonenum">
                <el-input v-model.trim="createForm.emergencyPhonenum" placeholder="请输入紧急联系人电话"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="24">
              <el-form-item label="家庭住址" prop="address">
                <el-input v-model.trim="createForm.address" placeholder="请输入家庭住址"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <div class="page-panel-title">技能信息</div>
        <div class="page-pane2">
          <el-button size="mini" type="info" @click="addLevel()">新增技能</el-button>
        </div>
        <div class="page-panel">
          <el-row v-for="(item, index) in skillList" :key="index" :gutter="24">
            <el-col :span="11">
              <el-form-item label="技能名称">
                <el-select v-model="item.skillTypeId" placeholder="请选择技能名称"
                  @change="onSelectSkill(item.skillTypeId, index)" style="width: 100%">
                  <el-option v-for="it in skillData" :key="it.id" :label="it.skillTypeName" :value="it.id" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="技能等级">
                <el-select v-model="item.skillLevelId" placeholder="请选择技能等级" style="width: 100%">
                  <el-option v-for="it in item.skillLevelList" :key="it.id" :label="it.skillLevel" :value="it.id" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="2" v-if="index != 0">
              <el-button size="small" type="danger" @click="deleteLevel(index)">删除</el-button>
            </el-col>
          </el-row>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeNetWorker()">关 闭</el-button>
        <el-button type="primary" @click="confirmData('createForm')">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  sysUserAdd,
  sysUserUpdate,
  sysUserQueryById,
  checkLoginNameIsExists,
  findAllBusinessRoleForSelect,
  findListForSelect,
  findSkillLevelList,
} from "@/api/index";
export default {
  name: "RoleDialog",
  data () {
    return {
      title: "",
      isEdit: false,
      visible: false,
      createForm: {},
      skillList: [],
      roleList: [],
      skillData: [],
      rules: {
        username: [{ required: true, message: "请输入用户名称", trigger: "blur" }],
        loginName: [
          { required: true, message: "请输入用户账号", trigger: "blur" },
          { validator: this.validateLoginName },
        ],
        roleIds: [{ required: true, message: "请选择用户角色", trigger: "blur" }],
        phonenum: [{ required: true, message: "请输入电话号码", trigger: "blur" }],
        baseSalary: [{ required: true, message: "请输入基本薪资", trigger: "blur" }],
        onDuty: [{ required: true, message: "请选择是否在岗", trigger: "blur" }],
      },
    };
  },
  created () { },
  mounted () { },
  methods: {
    add () {
      this.title = "新增";
      this.isEdit = false;
      this.createForm = {};
      this.skillList = [];
      this.addLevel();
      this.init();
      this.visible = true;
    },
    edit (val) {
      this.title = "编辑";
      this.isEdit = true;
      this.visible = true;
      this.skillList = [];
      this.init();
      sysUserQueryById({ id: val.id }).then((res) => {
        if (res.data.code == 0) {
          this.createForm = res.data.data;
          let skillList = res.data.data.skillList;
          if (skillList.length > 0) {
            for (var i = 0; i < skillList.length; i++) {
              this.initSkillLevel(skillList[i], i);
            }
          }
        }
      });
    },
    initSkillLevel (item, index) {
      setTimeout(async () => {
        const res = await this.getSkillLevelBySkillTypeId(item.skillTypeId);
        item.skillLevelList = res;
        this.skillList.push(item);
      });
    },
    init () {
      findListForSelect({}).then((res) => {
        if (res.data.code == 0) {
          this.skillData = res.data.data;
          this.skillData.forEach((element) => {
            element.skillTypeName =
              element.skillTypeName +
              (element.skillPriceType == "0" ? "（时薪）" : "（件薪）");
          });
        }
      });
      findAllBusinessRoleForSelect({}).then((res) => {
        if (res.data.code == 0) {
          this.roleList = res.data.data;
        }
      });
    },
    getSkillLevelBySkillTypeId (skillTypeId) {
      return new Promise((resolve, reject) => {
        let params = {
          skillTypeId: skillTypeId,
        };
        findSkillLevelList(params).then((res) => {
          if (res.data.code == 0) {
            resolve(res.data.data);
          }
        });
      });
    },
    onSelectSkill (skillTypeId, index) {
      setTimeout(async () => {
        const res = await this.getSkillLevelBySkillTypeId(skillTypeId);
        this.skillList[index].skillLevelList = res;
        this.skillList[index].skillLevelId = "";
      });
    },
    // 增加行
    addLevel () {
      this.skillList.push({
        skillTypeId: "",
        skillLevelId: "",
        skillLevelList: [],
      });
    },
    // 删除行
    deleteLevel (index) {
      this.skillList.splice(index, 1);
    },
    confirmData (formData) {
      this.$refs[formData].validate((valid) => {
        if (valid) {
          this.createForm.skillList = this.skillList;
          if (this.createForm.id) {
            sysUserUpdate(this.createForm).then((res) => {
              const data = res.data;
              if (data.code == 0) {
                this.$message.success("修改成功");
                this.$emit("ok");
                this.closeNetWorker();
              } else {
                this.$message.error(data.data || "修改失败");
              }
            });
          } else {
            sysUserAdd(this.createForm).then((res) => {
              const data = res.data;
              if (data.code == 0) {
                this.$message.success("新增成功");
                this.$emit("ok");
                this.closeNetWorker();
              } else {
                this.$message.error(data.data || "新增失败");
              }
            });
          }
        }
      });
    },
    closeNetWorker () {
      this.createForm = {};
      this.skillList = [];
      this.visible = false;
    },
    validateLoginName (rule, value, callback) {
      if (this.isEdit) {
        callback();
        return;
      }
      let params = {
        loginName: value,
      };
      checkLoginNameIsExists(params).then((res) => {
        if (res && res.data.code == 0) {
          if (!res.data.data) {
            callback();
          } else {
            callback("用户账号已经存在");
          }
        } else {
          callback(res.data.data);
        }
      });
    },
  },
};
</script>
<style scoped lang="less"></style>
